<template>
  <div>
    <el-button type="primary" size="small" @click="submitAll()">提交审批</el-button>
    <h1 style="text-align:center">材料需求</h1>
    <el-form style="width:90%;margin:10px auto" v-model="formdata" :inline="true"> <!-- 材料总计划表单 -->
      <el-row>
        <el-col :span="24"><div class="borderDiv">基本信息</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="borderDiv">
          <el-form-item label="日期">
            <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="formdata.date">
            </el-date-picker>
          </el-form-item></div>
        </el-col>
        <el-col :span="6"><div class="borderDiv">
          <el-form-item label="需求编号">
            <el-input readonly value="保存后自动生成"></el-input>
          </el-form-item></div>
        </el-col>
        <el-col :span="12"><div class="borderDiv">
          <el-form-item label="需求主题">
            <el-input v-model="formdata.needSubject"></el-input>
          </el-form-item></div>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="6"><div class="borderDiv">
        <el-form-item label="计划名称">
          <el-input v-model="formdata.planName" @focus="materialPlan=true" readonly></el-input>
        </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="borderDiv">
            <el-form-item label="编制人">
              <el-input v-model="formdata.applyer" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="borderDiv">
            <el-form-item label="备注">
              <el-input type="textarea" autosize v-model="formdata.comment" style="width:800px"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog :visible.sync="materialDialog" width="80%">
      <MaterialList @row="getMaterialRow"></MaterialList>
    </el-dialog>
    <el-dialog :visible.sync="materialPlan" width="80%">
      <MaterialPlanList @row="getPlanRow"></MaterialPlanList>
    </el-dialog>
    
    <el-form>
      <el-button @click="addrow()" v-if="rownum<11">增行</el-button>
      <el-button @click="decreaserow()" v-if="rownum>1">删行</el-button>
      <el-row style="text-align:center">
        <el-col :span="4"><div class="borderDiv">材料名称</div></el-col>
        <el-col :span="4"><div class="borderDiv">规格型号</div></el-col>
        <el-col :span="4"><div class="borderDiv">单位</div></el-col>
        <el-col :span="4"><div class="borderDiv">总计划量</div></el-col>
        <el-col :span="4"><div class="borderDiv">使用部位</div></el-col>
        <el-col :span="4"><div class="borderDiv">备注</div></el-col>
      </el-row>
      <el-row v-for="index of rownum" :key="index">
        <el-col :span="4"><div class="borderDiv"><el-input readonly @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].materialName">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input readonly
        @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].unitModel">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input readonly
        @focus="materialDialog=true;selectedBatchRow=index-1" v-model="batchData[index-1].unit">
        </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].useCount">
          </el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].useTo"></el-input></div></el-col>
        <el-col :span="4"><div class="borderDiv"><el-input v-model="batchData[index-1].comment"></el-input></div></el-col>
      </el-row>
    </el-form>

  </div>
</template>
<script>
import MaterialList from "../common/material/MaterialList"
import MaterialPlanList from "../common/material/MaterialPlanList"
import MaterialNeedModel from "../../model/lyz/MaterialNeedModel"
const MNM=MaterialNeedModel.getInstance();
export default{
  components:{
    MaterialList,
    MaterialPlanList
  },
  data(){
    return{
      formdata:{//表单信息
        
      },
      materialDialog:false,//材料框
      rownum:1,//添加材料需求的行数
      materialPlan:false,//计划框
      batchData:[{}],//批量添加信息
      selectedBatchRow:0,//选中的批量添加行
    }
  },
  created(){
    this.formdata.applyer=sessionStorage.getItem("realName")
  },
  methods:{
    getPlanRow(row){
      console.log(row);
      this.materialPlan=false;
      this.formdata.planId=row.id;
      this.formdata.planName=row.planSubject;
    },
    getMaterialRow(row){
      this.batchData[this.selectedBatchRow].materialName=row.materialName;
      this.batchData[this.selectedBatchRow].mateTypeId=row.id;
      this.batchData[this.selectedBatchRow].unitModel=row.unitModel;
      this.batchData[this.selectedBatchRow].unit=row.unit;
      this.batchData[this.selectedBatchRow].price=row.price;
      this.materialDialog=false;

    },
    addrow(){//添加一行
      this.batchData.push({});
      this.rownum++;      
    },
    decreaserow(){//减少一行
      this.batchData.pop();
      this.rownum--;
    },
    submitAll(){//添加
      MNM.saveNeed(this.formdata,this.batchData);
    }
  }
}
</script>
<style>
.borderDiv{

}
</style>
